<template>
  <div class="p-6">
    <!-- 搜索 & 筛选 -->
    <a-space class="mb-4">
      <a-input
        v-model:value="filters.keyword"
        placeholder="搜索数据名称/描述"
        style="width: 250px"
      />
      <a-select
        v-model:value="filters.type"
        placeholder="数据类型"
        style="width: 150px"
        allow-clear
      >
        <a-select-option v-for="type in types" :key="type" :value="type">{{ type }}</a-select-option>
      </a-select>
      <a-button type="primary" @click="fetchData">搜索</a-button>
    </a-space>

    <!-- 批量操作 -->
    <a-space class="mb-2">
      <a-button type="primary" @click="batchExport" :disabled="!selectedRows.length">导出</a-button>
      <a-button type="dashed" @click="batchDelete" danger :disabled="!selectedRows.length">删除</a-button>
      <a-button type="default" @click="importData">导入</a-button>
    </a-space>

    <!-- 数据表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :row-selection="rowSelection"
      row-key="id"
      bordered
      :scroll="{ x: 1000 }"
      @row-click="openDetails"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click.stop="editData(record)">编辑</a-button>
            <a-button type="link" danger @click.stop="deleteData(record)">删除</a-button>
            <a-button type="link" @click.stop="exportData(record)">导出</a-button>
          </a-space>
        </template>
        <template v-else>
          {{ record[column.dataIndex] }}
        </template>
      </template>
    </a-table>

    <!-- 详情侧边栏 -->
    <a-drawer
      title="数据详情"
      :visible="showDetails"
      :width="400"
      placement="right"
      @close="showDetails = false"
    >
      <div v-if="selectedRecord">
        <p><strong>名称：</strong>{{ selectedRecord.name }}</p>
        <p><strong>描述：</strong>{{ selectedRecord.description }}</p>
        <p><strong>类型：</strong>{{ selectedRecord.type }}</p>
        <p><strong>创建时间：</strong>{{ selectedRecord.createdAt }}</p>
        <p><strong>更新人：</strong>{{ selectedRecord.updatedBy }}</p>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const data = ref([
  { id: 1, name: '用户数据', description: '系统用户信息', type: '表格', createdAt: '2024-01-01', updatedBy: 'Admin' },
  { id: 2, name: '订单数据', description: '订单明细', type: '表格', createdAt: '2024-02-15', updatedBy: 'Admin' },
  { id: 3, name: '日志数据', description: '系统操作日志', type: '日志', createdAt: '2024-03-05', updatedBy: 'System' },
])

const filters = ref({ keyword: '', type: '' })
const types = ['表格', '日志', '报表']

const selectedRows = ref([])
const showDetails = ref(false)
const selectedRecord = ref(null)

const columns = [
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
  { title: '更新人', dataIndex: 'updatedBy', key: 'updatedBy' },
  { title: '操作', key: 'action' },
]

const filteredData = computed(() => {
  return data.value.filter(d => {
    const matchKeyword = !filters.value.keyword || d.name.includes(filters.value.keyword) || d.description.includes(filters.value.keyword)
    const matchType = !filters.value.type || d.type === filters.value.type
    return matchKeyword && matchType
  })
})

const rowSelection = {
  selectedRowKeys: selectedRows.value,
  onChange: keys => selectedRows.value = keys
}

function fetchData() {
  console.log('搜索条件：', filters.value)
}

function openDetails(record) {
  selectedRecord.value = record
  showDetails.value = true
}

function editData(record) {
  console.log('编辑数据', record)
}

function deleteData(record) {
  data.value = data.value.filter(d => d.id !== record.id)
}

function exportData(record) {
  console.log('导出数据', record)
}

function batchExport() {
  console.log('批量导出', selectedRows.value)
}

function batchDelete() {
  data.value = data.value.filter(d => !selectedRows.value.includes(d.id))
  selectedRows.value = []
}

function importData() {
  console.log('导入数据')
}
</script>
